
<template>
  <div class="moreServices">
    <van-nav-bar title="更多服务" left-arrow @click-left="onClickLeft" />
    <div class="divBox" v-for="(item,index) in service_list" :key="index">
        <h4>{{ item.name }}</h4>
        <div class="content">
            <div class="items" v-for="(v,i) in item.details" :key="i">
                <div class="imgBox"><img :src="v.imgUrl"/></div>
                <div>
                    <p class="title">{{ v.title }}</p>
                    <p class="describe">{{ v.describe }}</p>
                </div>
            </div>
        </div>
        
    </div>
  </div>
</template>

<script>
export default {
  name: 'moreServices',
  data(){
    return{
      service_list:[
        {id:1,name:'服务预定',details:[{id:11,title:'酒店',path:null,value:'index',imgUrl:require('@/assets/images/services/service1.jpg'),describe:'品质酒店安心享'},{id:12,title:'专车',path:null,value:'index',imgUrl:require('@/assets/images/services/service2.jpg'),describe:'预定专车享实惠'},{id:13,title:'代泊车',path:null,value:'index',imgUrl:require('@/assets/images/services/service3.jpg'),describe:'机场停车有人帮'},{id:14,title:'手机值机',path:null,value:'index',imgUrl:require('@/assets/images/services/service4.jpg'),describe:'为他人办值机'},{id:15,title:'保险',path:null,value:'index',imgUrl:require('@/assets/images/services/service5.jpg'),describe:'全新疫苗险'},{id:16,title:'航旅优选',path:null,value:'index',imgUrl:require('@/assets/images/services/service6.jpg'),describe:'正品保障'}]},
        {id:2,name:'出行工具',details:[{id:21,title:'行程单',path:null,value:'index',imgUrl:require('@/assets/images/services/service7.jpg'),describe:'轻松打印送到家'},{id:22,title:'执飞航线',path:null,value:'index',imgUrl:require('@/assets/images/services/service8.jpg'),describe:'查询航线执飞'},{id:23,title:'航班雷达',path:null,value:'index',imgUrl:require('@/assets/images/services/service9.jpg'),describe:'头顶飞机轻松查'},{id:24,title:'关注列表',path:null,value:'index',imgUrl:require('@/assets/images/services/service10.jpg'),describe:'航班动态不错过'},{id:25,title:'运营实况',path:null,value:'index',imgUrl:require('@/assets/images/services/service11.jpg'),describe:'全球航班全掌握'},{id:26,title:'我的客服',path:null,value:'index',imgUrl:require('@/assets/images/services/service12.jpg'),describe:'有事没事请找我'},{id:27,title:'时光机',path:null,value:'index',imgUrl:require('@/assets/images/services/service13.jpg'),describe:'快来时光旅行'}]},
        {id:3,name:'防疫专区',details:[{id:31,title:'一码通行',path:null,value:'index',imgUrl:require('@/assets/images/services/service14.jpg'),describe:'防疫信息健康码'},{id:32,title:'防疫政策',path:null,value:'index',imgUrl:require('@/assets/images/services/service15.jpg'),describe:'出入政策查询'},{id:33,title:'疫情航班查询',path:null,value:'index',imgUrl:require('@/assets/images/services/service16.jpg'),describe:'确诊患者同程查询'},{id:34,title:'疫情风险查询',path:null,value:'index',imgUrl:require('@/assets/images/services/service17.jpg'),describe:'中高风险地区名单'}]},
        {id:4,name:'行业机构',details:[{id:41,title:'机场专区',path:null,value:'index',imgUrl:require('@/assets/images/services/service18.jpg'),describe:'全球机场信息查询'},{id:42,title:'航空公司',path:null,value:'index',imgUrl:require('@/assets/images/services/service19.jpg'),describe:'特色服务及资讯'},{id:43,title:'民航服务评价',path:null,value:'index',imgUrl:require('@/assets/images/services/service20.jpg'),describe:'消费者满意度调查'}]},
    ],
    }
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    }
  }
} 
</script>

<style scoped>
.divBox{
    width: 350px;
    margin: 0 auto;
    text-align: left;
}
.content{
    width: 330px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
}
.items{
    width: 160px;
    display: flex;
    margin-right: 5px;
}
.imgBox{
    width: 60px;
    height: 60px;
}
img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.title{
    font-size: 14px;
    margin: 5px 0 5px 0;
    font-weight: 600;
}
.describe{
    font-size: 12px;
    color: #8f8f8f;
    margin: 5px 0 5px 0;
}
h4{
    font-size: 18px;
    margin: 15px 0 5px 0;
}
</style>
